<template>
  <div class="height-full">
    <Tabs
      v-model="tabActiveValue"
      class="custom-tabs back-white mb20"
      @on-click="(name) => $router.push({ name: 'typeConfig', query: { t: name } })"
    >
      <TabPane v-for="(tab, i) of tabs" :key="i" :label="tab.label" :name="tab.value"></TabPane>
    </Tabs>

    <transition name="fade" mode="out-in">
      <component
        class="tc-container pt18 pl12 back-white"
        :is="tabActiveItem.component"
        :form-data="formData"
      ></component>
    </transition>
  </div>
</template>

<script>
// components
import NeededTypeConfig from './components/NeededTypeConfig.vue'
import ProvideUnitConfig from './components/ProvideUnitConfig.vue'
import EnterUnitConfig from './components/EnterUnitConfig.vue'

export default {
  name: 'TypeConfig',

  components: { NeededTypeConfig, ProvideUnitConfig, EnterUnitConfig },

  data() {
    return {
      tabActiveValue: '',
      tabs: [
        { label: '所需类型配置', value: 'neededType', component: 'needed-type-config' },
        { label: '供稿单位配置', value: 'provideUnit', component: 'provide-unit-config' },
        // { label: '代录入单位配置', value: 'enterUnit', component: 'enter-unit-config' },
      ],

      formData: {},
    }
  },

  computed: {
    tabActiveItem() {
      return this.tabs.find((t) => t.value === this.tabActiveValue) || {}
    },
  },

  methods: {
    handleTabClick() {},
  },

  mounted() {
    this.tabActiveValue = this.$route.query.t || this.tabs[0].value
  },
}
</script>

<style scoped>
.custom-tabs {
  padding: 14px 10px 6px;
}

.tc-container {
  min-height: calc(100% - 84px);
}
</style>
